<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光山县旅游产业监控中心</title>
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/lvyoujia_jt.css">
    <link rel="stylesheet" href="./assets/css/mapSearch.css">
</head>
<body  onLoad="onLoad()">
<div class="box">
    <!--头部-->
    <div class="title-box">
        <div class="title-img">
            <h3>光山县旅游产业监控中心</h3>
        </div>
        <ul class="link-box">
            <li><a href="index.html">人流热力图</a></li>
            <li><a href="chanye_jq.html">行业运行监测</a></li>
            <li><a href="industryDevelopment.html">行业发展监测</a></li>
            <li class="active"><a href="video.html">第三方数据</a></li>
        </ul>
        <div class="title-left">
            <span>光山县</span>
            <span id="weather">小雨转晴</span>
            <span id="temperature">32/23℃</span>
            <span id="windPower">东风</span>
        </div>
    </div>
    <!--主体-->
    <div class="main-box">
        <!--导航-->
        <div class="nav-box">
            <ul>
                <li>
                    <a href="index.html">
                        <div>
                            <img src="./assets/images/icon-index.png">
                            <img src="./assets/images/icon-index-active.png">
                        </div>
                        <p>大数据人流热力图</p>
                    </a>
                </li>
                <li>
                    <a href="./chanye_jq.html">
                        <div>
                            <img src="./assets/images/icon-analysis.png">
                            <img src="./assets/images/icon-analysis-active.png">
                        </div>
                        <p>行业运行监测及统计</p>
                    </a>
                </li>
                <li>
                    <a href="./industryDevelopment.html">
                        <div>
                            <img src="./assets/images/icon-operation.png">
                            <img src="./assets/images/icon-operation-active.png">
                        </div>
                        <p>行业发展监测及统计</p>
                    </a>
                </li>
                <li class="active">
                    <a href="./lvyoujia_qx.html">
                        <div>
                            <img src="./assets/images/icon-activity.png">
                            <img src="./assets/images/icon-activity-active.png">
                        </div>
                        <p>第三方数据处理和呈现</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--数据内容-->
        <div class="content-box flex-column">
            <div class="content-nav">
                <ul>
                    <li>
                        <a href="./video.html">视频监控</a>
                    </li>
                    <li class="active">
                        <a href="./lvyoujia_jt.html">交通</a>
                    </li>
                    <li>
                        <a href="http://www.weather.com.cn/weather1dn/101180604.shtml" target="_blank">气象</a>
                    </li>
                </ul>
            </div>
            <div class="content-main flex-row flex1">
                <div class="content-right flex">
                    <div class="content-right-top flex flex1">
                        <div class="content-right-bg bg-1 flex1">
                            <div class="content-title">
                                实时路况
                                <div class="title-right">
                                    <div class="map-search">
                                        <input type="text" placeholder="请输入关键词" id="suggestId">
                                    </div>
                                    <button class="mgr-16" onclick="localsearch.search(document.getElementById('suggestId').value)">搜索</button>
                                    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                                    <div class="map-tab">
                                        <button class="congestion-btn">拥堵</button>
                                        <button class="amble-btn">缓行</button>
                                        <button class="smooth-btn">畅通</button>
                                        <button>路况信息</button>
                                    </div>
                                </div>
                            </div>
                            <div class="content-left-main bg-main-1 flex1">
                                <div class="map-box">
                                    <div class="map" id="allmap"></div>
                                    <div class="map-info">
                                        <div>
                                            <div>
                                                <i>
                                                    <img src="./assets/images/icon-roadControl.png">
                                                    <span>道路管制</span>
                                                </i>
                                                <p>共0条</p>
                                            </div>
                                            <ul></ul>
                                        </div>
                                        <div>
                                            <div>
                                                <i>
                                                    <img src="./assets/images/icon-trafficIncident.png">
                                                    <span>交通事故</span>
                                                </i>
                                                <p>共0条</p>
                                            </div>
                                            <ul></ul>
                                        </div>
                                        <div>
                                            <div class="active">
                                                <i>
                                                    <img src="./assets/images/icon-toll.png">
                                                    <span>收费站管制</span>
                                                </i>
                                                <p>共4条</p>
                                            </div>

                                            <ul class="scrollbar">
                                                <li>
                                                    <span>1</span>
                                                    <p>
                                                        信阳收费站 信阳市红旗区道路双向管制中
                                                    </p>
                                                </li>
                                                <li>
                                                    <span>2</span>
                                                    <p>
                                                        信阳收费站 信阳市红旗区道路双向管制中
                                                    </p>
                                                </li>
                                                <li>
                                                    <span>3</span>
                                                    <p>
                                                        信阳收费站 信阳市红旗区道路双向管制中
                                                    </p>
                                                </li>
                                                <li>
                                                    <span>4</span>
                                                    <p>
                                                        信阳收费站 信阳市红旗区道路双向管制中
                                                    </p>
                                                </li>
                                            </ul>
                                        </div>
                                        <div>
                                            <div>
                                                <i>
                                                    <img src="./assets/images/icon-conservation.png">
                                                    <span>养护施工</span>
                                                </i>
                                                <p>共0条</p>
                                            </div>
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <div class="search-box">
        <div id="promptDiv" class="prompt"></div>
        <!-- 统计面板 -->
        <div id="statisticsDiv" class="statistics"></div>
        <!-- 建议词面板 -->
        <div id="suggestsDiv" class="suggests"></div>
        <!-- 公交提示面板 -->
        <div id="lineDataDiv" class="lineData"></div>
        <!-- 搜索结果面板 -->
        <div id="resultDiv" class="result">
            <div id="searchDiv"></div>
            <div id="pageDiv">
                <input type="button" value="第一页" onClick="localsearch.firstPage()"/>
                <input type="button" value="上一页" onClick="localsearch.previousPage()"/>
                <input type="button" value="下一页" onClick="localsearch.nextPage()"/>
                <input type="button" value="最后一页" onClick="localsearch.lastPage()"/>
                <br/>
                转到第<input type="text" value="1" id="pageId" size="3"/>页
                <input type="button" onClick="localsearch.gotoPage(parseInt(document.getElementById('pageId').value));"
                       value="转到"/>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./assets/plugin/jquery.min.js"></script>
<script src="./assets/plugin/ECharts/echarts.js"></script>
<script src="./assets/plugin/jquery.leoTextAnimate.js"></script>
<script src="./assets/js/public.js"></script>
<script src="./assets/js/lvyoujia_jt.js"></script>
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=c8e5a90c0f22f143055214a84727eed8" type="text/javascript"></script>
<script>
    var map;
    var zoom = 10;
    var localsearch;
    function onLoad() {
        //初始化地图对象
        map = new T.Map("allmap");
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(114.925533, 32.015907), zoom);

        var config = {
            pageCapacity: 10,	//每页显示的数量
            onSearchComplete: localSearchResult	//接收数据的回调函数
        };
        //创建搜索对象
        localsearch = new T.LocalSearch(map, config);
    }

    function localSearchResult(result) {
        //清空地图及搜索列表
        clearAll();

        //添加提示词
        prompt(result);

        //根据返回类型解析搜索结果
        switch (parseInt(result.getResultType())) {
            case 1:
                //解析点数据结果
                pois(result.getPois());
                break;
            case 2:
                //解析推荐城市
                statistics(result.getStatistics());
                break;
            case 3:
                //解析行政区划边界
                area(result.getArea());
                break;
            case 4:
                //解析建议词信息
                suggests(result.getSuggests());
                break;
            case 5:
                //解析公交信息
                lineData(result.getLineData());
                break;
        }
    }

    //解析提示词
    function prompt(obj) {
        var prompts = obj.getPrompt();
        if (prompts) {
            var promptHtml = "";
            for (var i = 0; i < prompts.length; i++) {
                var prompt = prompts[i];
                var promptType = prompt.type;
                var promptAdmins = prompt.admins;
                var meanprompt = prompt.DidYouMean;
                if (promptType == 1) {
                    promptHtml += "<p>您是否要在" + promptAdmins[0].name + "</strong>搜索更多包含<strong>" + obj.getKeyword() + "</strong>的相关内容？<p>";
                }
                else if (promptType == 2) {
                    promptHtml += "<p>在<strong>" + promptAdmins[0].name + "</strong>没有搜索到与<strong>" + obj.getKeyword() + "</strong>相关的结果。<p>";
                    if (meanprompt) {
                        promptHtml += "<p>您是否要找：<font weight='bold' color='#035fbe'><strong>" + meanprompt + "</strong></font><p>";
                    }
                }
                else if (promptType == 3) {
                    promptHtml += "<p style='margin-bottom:3px;'>有以下相关结果，您是否要找：</p>"
                    for (i = 0; i < promptAdmins.length; i++) {
                        promptHtml += "<p>" + promptAdmins[i].name + "</p>";
                    }
                }
            }
            if (promptHtml != "") {
                document.getElementById("promptDiv").style.display = "block";
                document.getElementById("promptDiv").innerHTML = promptHtml;
            }
        }
    }

    //解析点数据结果
    function pois(obj) {
        if (obj) {
            //显示搜索列表
            var divMarker = document.createElement("div");
            //坐标数组，设置最佳比例尺时会用到
            var zoomArr = [];
            for (var i = 0; i < obj.length; i++) {
                //闭包
                (function (i) {
                    //名称
                    var name = obj[i].name;
                    //地址
                    var address = obj[i].address;
                    //坐标
                    var lnglatArr = obj[i].lonlat.split(" ");
                    var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);

                    var winHtml = "名称:" + name + "<br/>地址:" + address;

                    //创建标注对象
                    var marker = new T.Marker(lnglat);
                    //地图上添加标注点
                    map.addOverLay(marker);
                    //注册标注点的点击事件
                    var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
                    marker.addEventListener("click", function () {
                        marker.openInfoWindow(markerInfoWin);
                    });

                    zoomArr.push(lnglat);

                    //在页面上显示搜索的列表
                    var a = document.createElement("a");
                    a.href = "javascript://";
                    a.innerHTML = name;
                    a.onclick = function () {
                        showPosition(marker, winHtml);
                    }
                    divMarker.appendChild(document.createTextNode((i + 1) + "."));
                    divMarker.appendChild(a);
                    divMarker.appendChild(document.createElement("br"));
                })(i);
            }
            //显示地图的最佳级别
            map.setViewport(zoomArr);
            //显示搜索结果
            divMarker.appendChild(document.createTextNode('共' + localsearch.getCountNumber() + '条记录，分' + localsearch.getCountPage() + '页,当前第' + localsearch.getPageIndex() + '页'));
            document.getElementById("searchDiv").appendChild(divMarker);
            document.getElementById("resultDiv").style.display = "block";
        }
    }

    //显示信息框
    function showPosition(marker, winHtml) {
        var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
        marker.openInfoWindow(markerInfoWin);
    }

    //解析推荐城市
    function statistics(obj) {
        if (obj) {
            //坐标数组，设置最佳比例尺时会用到
            var pointsArr = [];
            var priorityCitysHtml = "";
            var allAdminsHtml = "";
            var priorityCitys = obj.priorityCitys;
            if (priorityCitys) {
                //推荐城市显示
                priorityCitysHtml += "在中国以下城市有结果<ul>";
                for (var i = 0; i < priorityCitys.length; i++) {
                    priorityCitysHtml += "<li>" + priorityCitys[i].name + "(" + priorityCitys[i].count + ")</li>";
                }
                priorityCitysHtml += "</ul>";
            }

            var allAdmins = obj.allAdmins;
            if (allAdmins) {
                allAdminsHtml += "更多城市<ul>";
                for (var i = 0; i < allAdmins.length; i++) {
                    allAdminsHtml += "<li>" + allAdmins[i].name + "(" + allAdmins[i].count + ")";
                    var childAdmins = allAdmins[i].childAdmins;
                    if (childAdmins) {
                        for (var m = 0; m < childAdmins.length; m++) {
                            allAdminsHtml += "<blockquote>" + childAdmins[m].name + "(" + childAdmins[m].count + ")</blockquote>";
                        }
                    }
                    allAdminsHtml += "</li>"
                }
                allAdminsHtml += "</ul>";
            }
            document.getElementById("statisticsDiv").style.display = "block";
            document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;
        }
    }

    //解析行政区划边界
    function area(obj) {
        if (obj) {
            if(obj.points){
                //坐标数组，设置最佳比例尺时会用到
                var pointsArr = [];
                var points = obj.points;
                for (var i = 0; i < points.length; i++) {
                    var regionLngLats = [];
                    var regionArr = points[i].region.split(",");
                    for (var m = 0; m < regionArr.length; m++) {
                        var lnglatArr = regionArr[m].split(" ");
                        var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                        regionLngLats.push(lnglat);
                        pointsArr.push(lnglat);
                    }
                    //创建线对象
                    var line = new T.Polyline(regionLngLats, {
                        color: "blue",
                        weight: 3,
                        opacity: 1,
                        lineStyle: "dashed"
                    });
                    //向地图上添加线
                    map.addOverLay(line);
                }
                //显示最佳比例尺
                map.setViewport(pointsArr);
            }
            if(obj.lonlat){
                var regionArr = obj.lonlat.split(",");
                map.panTo(new T.LngLat(regionArr[0], regionArr[1]));
            }
        }
    }

    //解析建议词信息
    function suggests(obj) {
        if (obj) {
            //建议词提示，如果搜索类型为公交规划建议词或公交站搜索时，返回结果为公交信息的建议词。
            var suggestsHtml = "建议词提示<ul>";
            for (var i = 0; i < obj.length; i++) {
                suggestsHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>" + obj[i].address + "</font></li>";
            }
            suggestsHtml += "</ul>";
            document.getElementById("suggestsDiv").style.display = "block";
            document.getElementById("suggestsDiv").innerHTML = suggestsHtml;
        }
    }

    //解析公交信息
    function lineData(obj) {
        if (obj) {
            //公交提示
            var lineDataHtml = "公交提示<ul>";
            for (var i = 0; i < obj.length; i++) {
                lineDataHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>共" + obj[i].stationNum + "站</font></li>";
            }
            lineDataHtml += "</ul>";
            document.getElementById("lineDataDiv").style.display = "block";
            document.getElementById("lineDataDiv").innerHTML = lineDataHtml;
        }
    }

    //清空地图及搜索列表
    function clearAll() {
        map.clearOverLays();
        document.getElementById("searchDiv").innerHTML = "";
        document.getElementById("resultDiv").style.display = "none";
        document.getElementById("statisticsDiv").innerHTML = "";
        document.getElementById("statisticsDiv").style.display = "none";
        document.getElementById("promptDiv").innerHTML = "";
        document.getElementById("promptDiv").style.display = "none";
        document.getElementById("suggestsDiv").innerHTML = "";
        document.getElementById("suggestsDiv").style.display = "none";
        document.getElementById("lineDataDiv").innerHTML = "";
        document.getElementById("lineDataDiv").style.display = "none";
    }
</script>
</html>
